<template>
  <div class="login-container">
    <!-- ref 相当于 id，:model 表单数据对象, label-width 表单域标签的的宽度 -->
    <!-- 1、从Element中找到类似视图结构，检出视图代码，2、样式中调整视图位置，3、微调视图样式 -->
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">出纸机后台管理系统</h2>
      <el-form-item label="帐号" prop="username">
        <el-input v-model="form.username" placeholder="请输入帐号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 按需导入方法
import {login, getUserInfo} from '@/api/login'

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        // 对应el-form-item 的 prop 值
        username: [
          {
            required: true,
            message: "请输入有效账号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入有效密码",
            trigger: "blur"
          }
        ]
      }
    };
  },

  components: {},

  methods: {
    // 注意：按钮上调用的函数名要一致 submitForm
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(valid)
        if (valid) {
                // 提交表单给后台进行验证是否正确
                this.$store.dispatch('Login', this.form).then(response => {
                    // console.log('response.flag', response.flag)
                    //  // response 就是响应回来的那个真实对象
                    // if(response.flag) {
                    //     // 前往首页
                    //     this.$router.push('/')
                    // }else {
                    //     this.$message({
                    //         message: response.message,
                    //         type: 'waring'
                    //     })
                    // }
                    this.$router.push('/')
                }).catch(error => {
                    console.log('error', error)
                })
        } else {
          console.log('验证失败')
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
/* 登录框 放在屏幕中间，背景透明，圆角，里外间隔 */
.login-form {
  width: 350px;
  /* 上下间隙150px, 左右自动即居中 */
  margin: 160px auto;
  /*透明背景色*/
  background-color: rgb(255, 255, 255, 0.8);
  padding: 30px;
  /* 圆角 */
  border-radius: 20px;
}
/* 容器背景图片， 容器范围*/
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("../../assets/login.jpg");
  overflow: hidden;
}

/* 标题位置，标题颜色 */
.login-title {
  text-align: center;
  color: #303133;
}
</style>